<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">

<head th:include="include :: header"></head>
<!-- 总交易量-->
<body class="gray-bg" style="background-color: white;">
		<div class="container-div">
		<div id="container" style="height: 90%;width:90%"></div>
	</div>
	<div th:include="include :: footer"></div>
	<!-- 画图表部分 -->
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
		<script th:inline="javascript">
		var prefix = ctx + "system/hatchetOrderPayment";
		$(document).ready(function() {
		     //画柱状图       
			var days = [];
			var moneys = [];
			var bishus=[];
			$.ajax({
				url :prefix+"/selectAmount" ,
				type : 'post',
				async:false,
				dataType : 'json',
				success : function(data) {
					$.each(data, function(index, obj) {
						moneys.push(obj.trxAmt);//交易金额
						days.push(obj.time);//时间
						bishus.push(obj.dc);//笔数
					});
					var dom = document.getElementById("container");
					var myChart = echarts.init(dom);
					var app = {};
					option = null;
					app.title = '坐标轴刻度与标签对齐';
				/* 	option = {
						    tooltip : {
						        trigger: 'axis'
						    },
						    toolbox: {
						        show : true,
						        feature : {
						            mark : {show: true},
						            dataView : {show: true, readOnly: false},
						            magicType: {show: true, type: ['line', 'bar']},
						            restore : {show: true},
						            saveAsImage : {show: true}
						        }
						    },
						    calculable : true,
						    legend: {
						        data:['蒸发量','降水量','平均温度']
						    },
						    xAxis : [
						        {
						            type : 'category',
						            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
						        }
						    ],
						    yAxis : [
						        {
						            type : 'value',
						            name : '水量',
						            axisLabel : {
						                formatter: '{value} ml'
						            }
						        },
						        {
						            type : 'value',
						            name : '温度',
						            axisLabel : {
						                formatter: '{value} °C'
						            }
						        }
						    ],
						    series : [

						        {
						            name:'蒸发量',
						            type:'bar',
						            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
						        },
						        {
						            name:'降水量',
						            type:'bar',
						            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
						        },
						        {
						            name:'平均温度',
						            type:'line',
						            yAxisIndex: 1,
						            data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
						        }
						    ]
						};	 */
					option = {
					 title : {
					        text: '畅联盟十天交易金额',
					    },	
					    tooltip: {
					        trigger: 'axis',
					        axisPointer: {
					            type: 'cross',
					            crossStyle: {
					                color: '#999'
					            }
					        }
					    },
					    toolbox: {
					        show : true,
					        feature : {
					            mark : {show: true},
					            dataView : {show: true, readOnly: false},
					            magicType: {show: true, type: ['line','bar' ]},
					            restore : {show: true},
					            saveAsImage : {show: true}
					        }
					    },
					    calculable : true,
					    legend: {
					        data:['交易金额','交易笔数']
					    },
					    xAxis : [
					        {
					            type : 'category',
					            data : days,
					            axisTick: {
					                alignWithLabel: true
					            }
					        }
					    ],
					    yAxis : [
					        {
					            type : 'value',
					            name : '交易金额',
					            axisLabel : {
					                formatter: '{value}元'
					            }
					        },
					        {
					            type : 'value',
					            name : '交易笔数',
					            axisLabel : {
					                formatter: '{value} 笔'
					            }
					        }
					    ],
					    series : [
					        {
					            name:'交易金额',
					            type:'bar',
					            barWidth: '40%',
					            data:moneys
					        },
					        {
					            name:'交易笔数',
					            type:'line',
					            yAxisIndex: 1,
					            data:bishus
					        }
					    ]
					};
					if (option && typeof option === "object") {
					    myChart.setOption(option, true);
					}
				}
		}); 
	});	
	</script>
</body>
</html>